<template>
	<view class="c-container" style="border-bottom: 1px solid #dedede;">
		<view class="tab-control">
			<view class="tab-control-item" v-if="newsType != '7'" :class="{ active: currentIndex == 0 }" @click="tabClick('banquet')"><text>婚宴信息</text></view>
			<view class="tab-control-item" v-else :class="{ active: currentIndex == 0 }" @click="tabClick('baby')"><text>宝宝宴信息</text></view>
			<view class="tab-control-item" v-if="table.length > 0" :class="{ active: currentIndex == 1 }" @click="tabClick('table')"><text>加减桌</text></view>
			<view class="tab-control-item" v-if="vegetable.length > 0" :class="{ active: currentIndex == 2 }" @click="tabClick('vegetable')"><text>加减菜</text></view>
			<view class="tab-control-item" v-if="banquetSuborder.length > 0" :class="{ active: currentIndex == 3 }" @click="tabClick('suborder')"><text>婚宴增项</text></view>
		</view>
		<swiper :style="{ height: swiperHeight + 'px' }" @change="swiperChange" :current="swiperCurrent">
			<!-- 婚宴基本信息 -->
			<swiper-item @touchmove.stop v-if="!funs.isEmptyObj(banquet)">
				<view class="swiper-item"><baseInfo ref="baseInfo" :parent="_self" :banquet="banquet" class="baseInfo" /></view>
			</swiper-item>
			<!-- 宝宝宴基本信息 -->
			<swiper-item @touchmove.stop v-if="!funs.isEmptyObj(baby)">
				<view class="swiper-item"><babyInfo ref="babyInfo" :parent="_self" :baby="baby" class="babyInfo" /></view>
			</swiper-item>
			<!-- 加减桌信息 -->
			<swiper-item @touchmove.stop>
				<view class="swiper-item"><tableInfo ref="tableInfo" :parent="_self" :table="table" class="tableInfo" /></view>
			</swiper-item>
			<!-- 加减菜信息 -->
			<swiper-item @touchmove.stop>
				<view class="swiper-item"><vegetable ref="vegetableInfo" :parent="_self" :vegetable="vegetable" class="vegetable" /></view>
			</swiper-item>
			<!-- 增项信息 -->
			<swiper-item @touchmove.stop>
				<view class="swiper-item"><suborder ref="suborder" :parent="_self" :banquetSuborder="banquetSuborder" class="suborder" /></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
// 功能组件
import funs from '@/utils/funs.js';
import { updateSwiperHeight } from '@/utils/funs.js';
// 子组件
import baseInfo from './detail/base.vue';
import babyInfo from './detail/baby.vue';
import tableInfo from './detail/table.vue';
import vegetable from './detail/vegetable.vue';
import suborder from './detail/suborder.vue';

export default {
	components: {
		baseInfo,
		babyInfo,
		tableInfo,
		vegetable,
		suborder
	},
	props: {
		newsType: {
			type: String,
			default() {
				return '';
			}
		},
		baby: {
			type: Object,
			default() {
				return {};
			}
		},
		banquet: {
			type: Object,
			default() {
				return {};
			}
		},
		table: {
			type: Array,
			default() {
				return [];
			}
		},
		vegetable: {
			type: Array,
			default() {
				return [];
			}
		},
		banquetSuborder: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			currentIndex: 0,
			swiperCurrent: 0,
			swiperHeight: 0, // 滑动区域高度
			swiperItemHeights: []
		};
	},
	beforeMount() {
		this.funs = funs;
		this.updateSwiperHeight = updateSwiperHeight;
	},
	mounted() {
		console.log('newsType:', this.baby);
	},
	methods: {
		tabClick(type) {
			switch (type) {
				case 'banquet':
					this.currentIndex = 0;
					this.swiperCurrent = 0;
					break;

				case 'baby':
					this.currentIndex = 0;
					this.swiperCurrent = 0;
					break;

				case 'table':
					this.currentIndex = 1;
					this.swiperCurrent = 1;
					break;

				case 'vegetable':
					this.currentIndex = 2;
					this.swiperCurrent = 2;
					break;

				case 'suborder':
					this.currentIndex = 3;
					this.swiperCurrent = 3;
					break;
			}
		},
		swiperChange(e) {
			let index = e.detail.current;
			this.currentIndex = index;
		}
	}
};
</script>

<style lang="less">
.tab-control {
	display: flex;
	text-align: center;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	background-color: #fff;

	.tab-control-item {
		flex: 0 25%;
	}

	.tab-control-item text {
		padding: 5px;
	}

	.active {
		color: #007aff;
	}

	.active text {
		border-bottom: 3px solid #007aff;
	}
}
</style>
